<template>
    <div v-loading="loading">
        <div class="content-title">
            <span>业务类型设置</span>
            <el-button
                class="fr"
                @click="handleClick('create')"
                type="primary"
            >新增</el-button>
        </div>
        <div class="flex-box">
          <el-table :data="treeData"
            id="depTable"
            :height="tableHeight"
            v-loading="loading">
            <el-table-column v-for="(item, index) in fieldList"
                :key="index"
                :width="item.width"
                show-overflow-tooltip
                :prop="item.field"
                :label="item.value">
              <template slot="header"
                        slot-scope="scope">
                <div class="table-head-name">{{scope.column.label}}</div>
              </template>
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="150px"
                align="center"
            >
                <template slot-scope="scope">
                    <el-button
                        @click="handleClick('edit', scope)"
                        type="text"
                        size="small"
                    >编辑</el-button>
                    <el-button
                        @click="handleClick('delete', scope)"
                        type="text"
                        size="small"
                    >删除</el-button>
                </template>
            </el-table-column>
          </el-table>
        </div>
        <el-dialog title="提示" :visible.sync="productHandleDialog" width="400px">
            <el-form :model="productForm">
                <el-form-item label="业务类型名称" label-width="80">
                    <el-input v-model="productForm.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" label-width="80">
                    <el-input type="textarea" v-model="productForm.remark" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="productHandleDialog = false">取 消</el-button>
                <el-button type="primary" @click="handleProduct">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
    productCategoryIndex,
    productCategorySave,
    productCategoryUpdate,
    productCategoryDelete
} from '@/api/systemManagement/SystemCustomer'

export default {
    name: 'product-category-set',

    components: {},

    data() {
        return {
            loading: false, // 展示加载中效果
            fieldList: [
                { field: 'name', value: '业务类型名称'},
                { field: 'remark', value: '备注'},
            ],
            tableHeight: document.documentElement.clientHeight - 209, // 表的高度
            // 业务类型设置
            treeData: [],
            /** 更多操作 */
            treeSetTypes: [],
            // 编辑弹窗
            productHandleDialog: false,
            productForm: { name: '', type: '', pid: '', category_id: '', remark: '' },
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    mounted () {
        var self = this
        /** 控制table的高度 */
        window.onresize = function() {
            self.tableHeight = document.documentElement.clientHeight - 209
        }
    },

    created() {
        this.getProductCategoryIndex()
    },

    methods: {
        /**
         * 产品类别设置
         */
        getChild(node) {
            var temps = [
                // { type: 'create-child', name: '新建子分类' },
                // { type: 'create-brother', name: '新建平级分类' },
                { type: 'create-brother', name: '新建分类' },
                { type: 'edit', name: '编辑分类' },
                { type: 'delete', name: '删除分类' }
            ]
            this.treeSetTypes = temps.map(function (item, index, array) {
                item['node'] = node
                return item
            })
        },

        /**
         * 产品操作
         */
        handleClick(type, scope) {
            if (type == 'create') {
                this.productForm.type = type
                this.productForm.name = ''
                this.productForm.remark = ''
                this.productHandleDialog = true
            } else if (type == 'edit') {
                this.productForm.type = type
                this.productForm.name = scope.row.name
                this.productForm.remark = scope.row.remark
                this.productForm.category_id = scope.row.category_id
                this.productForm.pid = scope.row.pid
                this.productHandleDialog = true
            } else if (type == 'delete') {
                this.$confirm('确定删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                })
                    .then(() => {
                        this.loading = true
                        productCategoryDelete({
                            id: scope.row.category_id
                        })
                            .then(res => {
                                if (res.code == 1) {
                                    this.$message({
                                        type: 'success',
                                        message: '删除成功!'
                                    })
                                    this.getProductCategoryIndex()
                                    this.loading = false
                                } else {
                                    this.$message({
                                        type: 'warning',
                                        message: res.data
                                    })
                                }
                            })
                            .catch((err) => {
                                this.$message({
                                    type: 'warning',
                                    message: err.error
                                })
                                this.loading = false
                            })
                    })
                    .catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消删除'
                        })
                    })
            }
        },

        /**
         * 产品类别操作
         */
        handleProduct() {
            if (this.productForm.name.length == 0) {
                this.$message({
                    message: '请填写类型名称',
                    type: 'warning'
                })
                return
            }
            this.productHandleDialog = false
            if (this.productForm.type == 'create') {
                this.loading = true
                productCategorySave({
                    name: this.productForm.name,
                    remark: this.productForm.remark
                })
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '新增成功!'
                            })
                            this.getProductCategoryIndex()
                            this.loading = false
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.data
                            })
                        }
                    })
                    .catch((err) => {
                        this.$message({
                            type: 'warning',
                            message: err.error
                        })
                        this.loading = false
                    })
            } else if (this.productForm.type == 'edit') {
                this.loading = true
                productCategoryUpdate({
                    id: this.productForm.category_id,
                    pid: this.productForm.pid,
                    name: this.productForm.name,
                    remark: this.productForm.remark,
                })
                    .then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '编辑成功!'
                            })
                            this.getProductCategoryIndex()
                            this.loading = false
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.data
                            })
                        }
                    })
                    .catch((err) => {
                        this.$message({
                            type: 'warning',
                            message: err.error
                        })
                        this.loading = false
                    })
            }
        },

        /**
         * 获取产品分类数据
         */
        getProductCategoryIndex() {
            this.loading = true
            productCategoryIndex({
                type: 'tree'
            })
                .then(res => {
                    this.loading = false
                    this.treeData = res.data
                })
                .catch(() => {
                    this.loading = false
                })
        }
    }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.content-title {
    padding: 10px;
    border-bottom: 1px solid #e6e6e6;
}

.content-title > span {
    display: inline-block;
    height: 36px;
    line-height: 36px;
    margin-left: 20px;
}

/* 产品类别设置 */
.product-setting {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 30px;
    position: relative;
}
.tree-box {
    overflow: auto;
}
.tree-box /deep/ .el-tree-node__expand-icon {
    display: none;
}
.tree-box /deep/ .el-tree-node__content {
    margin-bottom: 10px;
}
.node-data {
    font-size: 13px;
    .node-img {
        width: 15px;
        height: 15px;
        display: block;
        margin-right: 8px;
    }
    .node-label:hover {
        background-color: #ededed;
    }
    .node-label-set {
        margin-left: 8px;
        font-size: 12px;
        color: $xr-color-primary;
        display: none;
    }
}

.node-data:hover .node-label-set {
    display: block;
}

.product-setting-con {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
}
.fr{
    float: right ;
}
@import '../../../styles/table.scss';
</style>
